<template>
  <el-dialog 
    v-model="modelValue"
    :title="file?.label"
    width="80%"
    top="5vh"
    destroy-on-close 
    custom-class="preview-dialog"
  >
    <!-- 图片预览 -->
    <div v-if="previewType === 'image'" class="preview-container">
      <el-image 
        style="max-height: 70vh; max-width: 100%"
        :src="getFileUrl(file)"
        :preview-src-list="[getFileUrl(file)]"
        fit="contain"
        :initial-index="0"
        :zoom-rate="1.2"
        :max-scale="10"
        :min-scale="0.1"
      />
    </div>

    <!-- PDF预览 -->
    <div v-else-if="previewType === 'pdf'" class="preview-container">
      <iframe 
        :src="`/pdfjs/web/viewer.html?file=${encodeURIComponent(getFileUrl(file))}`" 
        style="width: 100%; height: 70vh; border: none"
      ></iframe>
    </div>

    <!-- 文本文件预览 -->
    <div v-else-if="previewType === 'text'" class="preview-container">
      <el-scrollbar style="height: 70vh">
        <pre class="text-preview">{{ fileContent }}</pre>
      </el-scrollbar>
    </div>

    <!-- Office文档预览 -->
    <div v-else-if="previewType === 'office'" class="preview-container">
      <iframe
        :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(getFileUrl(file))}`" 
        style="width: 100%; height: 70vh; border: none"
      ></iframe>
    </div>

    <!-- 视频预览 -->
    <div v-else-if="previewType === 'video'" class="preview-container">
      <video controls style="max-height: 70vh; max-width: 100%">
        <source :src="getFileUrl(file)" :type="`video/${getFileExtension(file)}`">
        您的浏览器不支持视频预览 
      </video>
    </div>

    <!-- 音频预览 -->
    <div v-else-if="previewType === 'audio'" class="preview-container">
      <audio controls style="width: 100%">
        <source :src="getFileUrl(file)" :type="`audio/${getFileExtension(file)}`">
        您的浏览器不支持音频预览 
      </audio>
    </div>

    <!-- 不支持的文件类型 -->
    <div v-else class="unsupported-preview">
      <el-icon :size="60"><Warning /></el-icon>
      <h3>不支持预览此文件类型</h3>
      <p>您可以下载后查看此文件</p>
    </div>

    <template #footer>
      <el-button @click="modelValue = false">关闭</el-button>
      <el-button type="primary" @click="$emit('download', file)">
        下载文件
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { Warning } from '@element-plus/icons-vue'
import { getFileExtension, getPreviewType } from '@/utils/document'

const props = defineProps({
  modelValue: Boolean,
  file: Object,
  previewType: String,
  fileContent: String
})

const emit = defineEmits(['update:modelValue', 'download'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const getFileUrl = (file) => {
  // 实际项目中应替换为真实的文件访问URL
  return `/api/files/${file.id}`
}
</script>

<style scoped>
.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  width: 100%;
}

.unsupported-preview {
  text-align: center;
  padding: 40px 0;
  color: var(--el-color-warning);
}

.unsupported-preview h3 {
  margin: 20px 0 10px;
}

.text-preview {
  white-space: pre-wrap;
  font-family: monospace;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 4px;
  margin: 0;
}

:deep(.preview-dialog) {
  display: flex;
  flex-direction: column;
}

:deep(.preview-dialog .el-dialog__body) {
  flex: 1;
  padding: 0;
}

:deep(.preview-dialog .el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  margin-right: 0;
}
</style>